import React, { useState, useCallback, useMemo, useEffect } from 'react'

export default function CallMene () {
  const [count, setCount] = useState(0)
  const [age, setAge] = useState(0)

  //回调函数，当count的值发生改变时，才会定义
  const change = useCallback(() => {
    console.log('--count--', count)
  }, [count])
  //useMemo 当依赖的值发生改变时，才重新计算
  const doubleCount = useMemo(() => {
    console.log('--doubleCOunt--', new Date())
    return count * 2
  }, [count])
  useEffect(() => {
    const timer1 = setInterval(() => {
      setCount(count => count + 2)
    }, 2000)

    const timer2 = setInterval(() => {
      setAge(age => age + 2)
    }, 500)
    return () => {
      clearInterval(timer1)
      clearInterval(timer2)
    }
  }, [])
  return (
    <div>
      CallMene
      <p>count is {count}</p>
      <p>age is {age}</p>
      <p>doubleCOunt is {doubleCount}</p>
      <p>
        <button onClick={change}>change</button>
      </p>
    </div>
  )
}
